
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="common.css"/>
    <style>
    .main{
        width: 1300px;
        height: 890px;
        margin-left: 160px;
        margin-right: 30px;
        margin: 0 auto;
        background:  url("img/007.jpg") no-repeat 600px bottom;
    }
    .nav{
        margin-top: 20px;
        margin-bottom: 13px;
    }
    li{
        float: left;
        margin-left: 12px;
    }
    a{
        width: 90px;
        height: 45px;
        display: block;
    }
    .a1{
        background: url("img/009.gif") no-repeat;
    }
    .a2{
        background: url("img/010.gif") no-repeat;
    }
    .a3{
        background: url("img/011.gif") no-repeat;
    }
    .a4{
        background: url("img/012.gif") no-repeat;   
    }
    .a1:hover{
        background: url("img/018.gif") no-repeat;
    }
    .a2:hover{
        background: url("img/019.gif") no-repeat;
    }
    .a3:hover{
        background: url("img/020.gif") no-repeat;
    }
    .a4:hover{
        background: url("img/021.gif") no-repeat;
    }
    section{
        width: 675px;
        line-height: 26px;
    }
    section p{
        font-size: 16px;
    }
    footer{
        height: 218px;
        background: url("img/013.jpg") no-repeat;
        padding-left: 20px;
        padding-top: 40px;
        margin-top: 20px;
    }
    footer img{
        display: block;
        width: 90px;
        height: 90px;
        border: 3px #83a6a8 solid;
        float: left;
        margin-top: 12px;
        margin-left: 18px;
    }
    </style>
</head>
<body>
    <div class="main clearfix">
        <div class="left">
            <header>
                <img src="img\008.jpg" alt="">
                <ul class="nav clearfix">
                    <li><a href="#" class="a1"></a></li>
                    <li><a href="#" class="a2"></a></li>
                    <li><a href="#" class="a3"></a></li>
                    <li><a href="#" class="a4"></a></li>
                </ul>
            </header>
            <section>
                <h5>爆笑网文——很搞笑哦！</h5>
                <p>酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                   酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                   酒桌上，领导醉意微微，拿起酒杯，说：
                   20多岁的男人，就像啤酒，生活节奏快！
                   30多岁的男人，就像红酒，生活讲究品位！
                   40多岁的男人，像我，就像白酒，而且还是陈酿，一滴就能把你醉倒！
                   美女小王也有点醉意，说了一句让人浮想联翩的话：你这岁数，能滴出一滴就不错了！
                </p>
 	<a href="https://github.com/Ever-Bright-V/Ever-Bright-V.github.io/tree/master"> github网页</a>
     <br>
<img src="image/test.jpg" alt="这里测试一张图片">
                <h5>个人随笔</h5>
                <p>这是今年4月份的新茶，到现在也才三个多月，喝起来肯定香了。可是这茶在我喝来，已经    没有多大的香气了，毕竟已经喝了两年了，喝不出以前的香气了。这是今年4月份的新茶，    到现在也才三个多月这是今年4月份的新茶，到现在也才三个多月这是。</p>
            </section>
            <footer class="clearfix">
                <img src="img\014.jpg" alt="">
                <img src="img\015.jpg" alt="">
                <img src="img\016.jpg" alt="">
                <img src="img\017.jpg" alt="">
            </footer>
        </div>
    </div>
</body>
</html>
